<template>
  <div class="layout">
    <!-- 引入组件 -->
	<cu-custom bgColor="bg-white">
		<block slot="content">首页</block>
	</cu-custom>
    <!-- 搜索记录标题 -->
    <div class="search-title" v-if="searchHistory.length">
      <!-- 文字 -->
      <div class="title-zi">搜索记录</div>
      <!-- 图标 -->
      <u-icon name="trash" color="#8f8f8f" width="28rpx" height="28rpx" @click="removehistory"></u-icon>
    </div>

    <!-- 搜索历史 -->
    <div class="search-history" v-if="searchHistory.length">
      <!-- 搜索 -->
      <div class="tab" v-for="(item, index) in searchHistory" :key="index" @click="clickTab(item)">{{ item }}</div>
    </div>

    <!-- 推荐 -->
    <div class="recommon">推荐</div>

    <!-- 推荐的 -->
    <div class="goods-list">
      <!-- 单独一个 -->
      <div class="goods-img-box" v-for="item in fordian[0]" :key="item.title">
        <div class="goods-img">
          <img src="../../static/bg.png" mode="">
        </div>
        <div v-show="item.is_hot" class="goods-icon">
          <!-- 热卖 -->
          <div class="goods-hot">{{ item.title }}</div>
        </div>
        <div class="goods-title">
          商品名字
        </div>
        <div class="goods-li">
          <div class="goods-price">Y{{ item.price }}</div>
          <div class="goods-sold">已卖{{ item.sold }}</div>
        </div>
        <div class="goods-address">
          <div class="goods-type" v-show="item.type_offical === 1">官方</div>
          <div class="goods-typeone" v-show="item.type_offical === 2">门店自营</div>
          <div class="goods-ad">{{ item.content }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchHistory: uni.getStorageSync("searchHistory") || [],
      fordian: [
        [{
          title: '热卖',
          content: '执行食物疑难问题',
          price: 22,
          sold: 123,
          type_offical: 2,
          is_hot: true
        },
        {
          title: '热卖',
          content: '杭州食物疑难问题',
          price: 22,
          sold: 123,
          type_offical: 3,
          is_hot: false
        },
        {
          title: '热卖',
          content: '执行食物疑难问题',
          price: 22,
          sold: 123,
          type_offical: 1,
          is_hot: false
        },
        {
          title: '热卖',
          content: '执行食问题',
          price: 22,
          sold: 123,
          type_offical: 2,
          is_hot: false
        }]
      ]
    };
  },
  methods: {
    getkeyword(e) {
      console.log("父组件", e);
      this.searchHistory = [...new Set([e, ...this.searchHistory])];
      uni.setStorageSync("searchHistory", this.searchHistory);
    },
    removehistory() {
      uni.showModal({
        title: "确认删除搜索历史？",
        success: res => {
          if (res.confirm) {
            console.log("点击了删除");
            uni.removeStorageSync("searchHistory");
            this.searchHistory = [];
          }
        }
      });
    },
    clickTab(item) {
      console.log("点击的item", item);
      this.getkeyword(item);
    }
  }
};
</script>

<style scoped lang="scss">
.layout {
  .search-title {
    width: 702rpx;
    height: 84rpx;
    margin: 8rpx 24rpx 0 24rpx;
    display: flex;
    .title-zi {
      width: 112rpx;
      height: 44rpx;
      font-size: 25rpx;
      line-height: 44rpx;
      font-weight: 600;
      margin: 20rpx 0;
    }
    u-icon {
      margin: 25rpx 2rpx 28rpx 560rpx;
    }
  }

  .search-history {
    width: 702rpx;
    height: 136rpx;
    overflow: scroll;
    margin: 0 24rpx 8rpx 24rpx;
    .tab {
      border: 2rpx solid #ababab;
      height: 56rpx;
      line-height: 56rpx;
      border-radius: 20rpx;
      display: inline-block;
      font-size: 28rpx;
      margin: 0 24rpx 12rpx 0;
    }
  }
  .recommon {
    width: 702rpx;
    height: 44rpx;
    font-size: 28rpx;
    font-weight: 500;
    margin: 20rpx 24rpx;
  }

  .goods-list {
    width: 702rpx;
    height: 832rpx;
    margin: 24rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 24rpx;

    .goods-img-box {
      position: relative;
      width: 339rpx;
      height: 362rpx;
      background: #ffffff;

      .goods-img {
        width: 339rpx;
        height: 198rpx;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .goods-icon {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #ef0a19;
        width: 72rpx;
        height: 48rpx;
        border-bottom-left-radius: 20rpx;
        border-top-right-radius: 10rpx;
        line-height: 48rpx;
        color: #efefef;

        .goods-hot {
          width: 48rpx;
          height: 32rpx;
          line-height: 32rpx;
          font-size: 24rpx;
          font-weight: 350;
          margin: 8rpx 12rpx;
        }
      }

      .goods-title {
        width: 307rpx;
        height: 44rpx;
        font-size: 28rpx;
        line-height: 44rpx;
        font-weight: 500;
        margin: 8rpx 16rpx;
      }

      .goods-li {
        display: flex;
        width: 307rpx;
        margin: 0 16rpx;

        .goods-price {
          width: 146rpx;
          height: 44rpx;
          color: #ef0a19;
          font-weight: 600;
        }

        .goods-sold {
          width: 108rpx;
          height: 44rpx;
          line-height: 44rpx;
          color: #cccccc;
          font-size: 24rpx;
          margin-left: 55rpx;
        }
      }

      .goods-address {
        width: 307rpx;
        height: 36rpx;
        line-height: 36rpx;
        margin: 8rpx 16rpx;
        display: flex;

        .goods-type {
          width: 44rpx;
          height: 22rpx;
          font-size: 22rpx;
          line-height: 22rpx;
          border-radius: 3rpx;
          background: #EBC980;
          margin: 5rpx 8rpx 5rpx 0;
          padding: 2rpx 4rpx;
        }

        .goods-typeone {
          width: 88rpx;
          height: 22rpx;
          line-height: 22rpx;
          background: #000000;
          color: #ffffff;
          margin: 7rpx 8rpx 7rpx 0;
          font-size: 22rpx;
          font-weight: 400;
          padding: 2rpx 4rpx;
          border-radius: 4rpx;
        }

        .goods-ad {
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
